<template>
  <div class="time-content">
    <div class="clock">
      <p class="date">{{ date }}</p>
      <p class="time">{{ time }}</p>
      <p class="name">数字时钟</p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'

const date = ref('0')
const time = ref('0')

const week = reactive([
  '星期日',
  '星期一',
  '星期二',
  '星期三',
  '星期四',
  '星期五',
  '星期六'
])

const zeroPadding = (num: number, digit: number) => {
  var zero = ''
  for (var i = 0; i < digit; i++) {
    zero += '0'
  }
  return (zero + num).slice(-digit)
}

const updateTime = () => {
  const cd = new Date()
  time.value =
    zeroPadding(cd.getHours(), 2) +
    ':' +
    zeroPadding(cd.getMinutes(), 2) +
    ':' +
    zeroPadding(cd.getSeconds(), 2)
  date.value =
    zeroPadding(cd.getFullYear(), 4) +
    '-' +
    zeroPadding(cd.getMonth() + 1, 2) +
    '-' +
    zeroPadding(cd.getDate(), 2) +
    ' ' +
    week[cd.getDay()]
}

setInterval(updateTime, 1000)
updateTime()

</script>

<style lang="scss" scoped>
.time-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: radial-gradient(rgb(10, 46, 56) 0%, rgb(0, 0, 0) 70%);
  .clock {
    font-family:
      Share Tech Mono,
      monospace;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #daf6ff;
    text-shadow:
      0 0 20px rgb(10, 175, 230),
      0 0 20px rgba(10, 175, 230, 0);
    .time {
      letter-spacing: 0.05rem;
      font-size: 80px;
      padding: 5px 0;
    }
    .date {
      letter-spacing: 0.1rem;
      font-size: 24px;
    }
    .name {
      letter-spacing: 0.1rem;
      font-size: 12px;
      padding: 20px 0 0;
    }
  }
}
</style>
